<template lang="html">
  <div class="mainTwo">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="publish-list">
          <span class="gray-bg-top">
            <img src="static/image/icon3.png" alt="" class="icon-midle">
            <span>热门采选排行</span>
          </span>
          <div class="hot-list-bg">
            <ul class="clearfix">
              <li class="clearfix" v-for="(item,index) of list" :key="index">
                <div v-if="index > '0'" @mouseenter="enter(item)">
                  <div class="one-line">
                    <span class="hot-color"
                      :class="{'hot-two': index == 1,'hot-three': index == 2,'gary':index > 2}">
                      {{ index + 1 }}
                    </span>
                    <a href="#" class="article-normal">{{ item.catalogDetailName }}</a>
                  </div>
                </div>
                <div v-if="index == '0'" :class="{active:isActive}">
                  <span class="text-one">
                    {{ index + 1 }}
                  </span>
                  <a href="#" class="article-normal">{{ item.catalogDetailName }}</a>
                </div>
                <div v-if="index == '0'">
                  <span class="hot-dw hot-one">{{ index + 1 }}</span>
                  <img src="static/image/timg14.png" alt="">
                  <span class="text-rigt">
                    <p class="list-book-title">{{ item.catalogDetailName }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailFirstResponsible }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPress }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPublushTime }}出版</p>
                    <p>
                      <span class="start-recom">推荐:</span>
                       <span class="book-money">
                            <i class="iconfont icon-wujiaoxing wjx-green"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                        </span>
                    </p>
                    <p>
                        <span class="money-dol">￥</span>
                        <span class="book-money">{{ item.catalogDetailPrice }}</span>
                        <span class="text-right posi-rel fr">
                        <i class="iconfont icon-gouwuche"></i>
                        </span>
                    </p>
                  </span>
                </div>
                <div v-show="seenDeatil&&item==current">
                  <span class="hot-dw"
                        :class="{'hot-two': index == 1,'hot-three': index == 2,'gary':index > 2}">
                    {{ index + 1 }}
                  </span>
                  <img src="static/image/timg14.png" alt="">
                  <span class="text-rigt">
                    <p class="list-book-title">{{ item.catalogDetailName }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailFirstResponsible }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPress }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPublushTime }}出版</p>
                    <p>
                      <span class="start-recom">推荐:</span>
                       <span class="book-money">
                            <i class="iconfont icon-wujiaoxing wjx-green"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                        </span>
                    </p>
                    <p>
                        <span class="money-dol">￥</span>
                        <span class="book-money">{{ item.catalogDetailPrice }}</span>
                        <span class="text-right posi-rel fr">
                        <i class="iconfont icon-gouwuche"></i>
                        </span>
                    </p>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="publish-list">
          <span class="gray-bg-top">
            <img src="static/image/icon2.png" alt="" class="icon-midle">
            <span>零售排行</span>
          </span>
          <div class="hot-list-bg">
            <ul class="clearfix">
              <li class="clearfix" v-for="(item,index) of list" :key="index">
                <div v-if="index > '0'" @click="toggle(item)">
                  <div class="one-line">
                    <span class="hot-color"
                      :class="{'hot-two': index == 1,'hot-three': index == 2,'gary':index > 2}">
                      {{ index + 1 }}
                    </span>
                    <a href="#" class="article-normal">{{ item.catalogDetailName }}</a>
                  </div>
                </div>
                <div v-if="index == '0'" :class="{active:isActive}">
                  <span class="text-one">
                    {{ index + 1 }}
                  </span>
                  <a href="#" class="article-normal">{{ item.catalogDetailName }}</a>
                </div>
                <div v-if="index == '0'">
                  <span class="hot-dw hot-one">{{ index + 1 }}</span>
                  <img src="static/image/timg14.png" alt="">
                  <span class="text-rigt">
                    <p class="list-book-title">{{ item.catalogDetailName }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailFirstResponsible }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPress }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPublushTime }}出版</p>
                    <p>
                      <span class="start-recom">推荐:</span>
                       <span class="book-money">
                            <i class="iconfont icon-wujiaoxing wjx-green"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                        </span>
                    </p>
                    <p>
                        <span class="money-dol">￥</span>
                        <span class="book-money">{{ item.catalogDetailPrice }}</span>
                        <span class="text-right posi-rel fr">
                        <i class="iconfont icon-gouwuche"></i>
                        </span>
                    </p>
                  </span>
                </div>
                <div v-if='item.show'>
                  <span class="hot-dw"
                        :class="{'hot-two': index == 1,'hot-three': index == 2,'gary':index > 2}">
                    {{ index + 1 }}
                  </span>
                  <img src="static/image/timg14.png" alt="">
                  <span class="text-rigt">
                    <p class="list-book-title">{{ item.catalogDetailName }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailFirstResponsible }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPress }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPublushTime }}出版</p>
                    <p>
                      <span class="start-recom">推荐:</span>
                       <span class="book-money">
                            <i class="iconfont icon-wujiaoxing wjx-green"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                        </span>
                    </p>
                    <p>
                        <span class="money-dol">￥</span>
                        <span class="book-money">{{ item.catalogDetailPrice }}</span>
                        <span class="text-right posi-rel fr">
                        <i class="iconfont icon-gouwuche"></i>
                        </span>
                    </p>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="publish-list">
          <span class="gray-bg-top">
            <img src="static/image/icon1.png" alt="" class="icon-midle">
            <span>馆配排行</span>
          </span>
          <div class="hot-list-bg">
            <ul class="clearfix">
              <li class="clearfix" v-for="(item,index) of list" :key="index">
                <div v-if="index > '0'" @mouseenter="enter(index)">
                  <div class="one-line">
                    <span class="hot-color"
                      :class="{'hot-two': index == 1,'hot-three': index == 2,'gary':index > 2}">
                      {{ index + 1 }}
                    </span>
                    <a href="#" class="article-normal">{{ item.catalogDetailName }}</a>
                  </div>
                </div>
                <div v-if="index == '0'" :class="{active:isActive}">
                  <span class="text-one">
                    {{ index + 1 }}
                  </span>
                  <a href="#" class="article-normal">{{ item.catalogDetailName }}</a>
                </div>
                <div v-if="index == '0'">
                  <span class="hot-dw hot-one">{{ index + 1 }}</span>
                  <img src="static/image/timg14.png" alt="">
                  <span class="text-rigt">
                    <p class="list-book-title">{{ item.catalogDetailName }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailFirstResponsible }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPress }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPublushTime }}出版</p>
                    <p>
                      <span class="start-recom">推荐:</span>
                       <span class="book-money">
                            <i class="iconfont icon-wujiaoxing wjx-green"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                        </span>
                    </p>
                    <p>
                        <span class="money-dol">￥</span>
                        <span class="book-money">{{ item.catalogDetailPrice }}</span>
                        <span class="text-right posi-rel fr">
                        <i class="iconfont icon-gouwuche"></i>
                        </span>
                    </p>
                  </span>
                </div>
                <div v-show="seenDeatil&&index==current">
                  <span class="hot-dw"
                        :class="{'hot-two': index == 1,'hot-three': index == 2,'gary':index > 2}">
                    {{ index + 1 }}
                  </span>
                  <img src="static/image/timg14.png" alt="">
                  <span class="text-rigt">
                    <p class="list-book-title">{{ item.catalogDetailName }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailFirstResponsible }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPress }}</p>
                    <p class="book-gary fz12">{{ item.catalogDetailPublushTime }}出版</p>
                    <p>
                      <span class="start-recom">推荐:</span>
                       <span class="book-money">
                            <i class="iconfont icon-wujiaoxing wjx-green"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                            <i class="iconfont icon-wujiaoxing icon-gray"></i>
                        </span>
                    </p>
                    <p>
                        <span class="money-dol">￥</span>
                        <span class="book-money">{{ item.catalogDetailPrice }}</span>
                        <span class="text-right posi-rel fr">
                        <i class="iconfont icon-gouwuche"></i>
                        </span>
                    </p>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name:'mainTwo',
  props:{
    list: Array
  },
  data () {
    return {
      isActive:true,
      seen:true,
      show:true,
      seenDeatil:false,
      current:0
    }
  },
  methods: {
    enter (index) {
      this.seen = false
      this.seenDeatil = true
      this.current = index
    },
    leave () {
      this.seen = true
      this.seenDeatil = false
      this.current = null
    }

  }
}
</script>

<style lang="scss" scoped>
$text-color:#2d2c2c;
$bg-color:#c33122;
$green-color:#2cd488;
$gray-color:#f2f1f0;
.active{
  display: none;
}
.mainTwo {
  width: 64rem;
  margin: auto;
}
.publish-list {
  background-color: #fff;
  width: 19.8rem;
  .gray-bg-top{
    background-color: #f0f0f0;
    cursor: pointer;
    display: inline-block;
    width: 100%;
    height: 2.6rem;
    line-height: 2.6rem;
    span {
      color: #2d2c2c;
      font-size: .8rem;
      font-weight: bold;
      letter-spacing: 1px;
    }
    .icon-midle {
      vertical-align: sub;
    }
  }
}
.hot-list-bg {
  padding:1rem;
  li {
    text-align: left;
    line-height: 1.25rem;
    padding-bottom: .5rem;
    // .test{
    //   &:hover{
    //     .showDetail{
    //       display: block;
    //     }
    //     .one-line{
    //       display: none;
    //     }
    //   }
    // }
  }
  img {
    width:108px;
    float: left;
  }
  .list-book-title{
    font-size: .7rem;
    font-weight: bold;
    color: $text-color;
  }
  .fz12 {
    font-size: .6rem;
  }
  .hot-one, .hot-two, .hot-three, .gary,.text-one{
    display: inline-block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }
  .hot-dw {
    position: absolute;
    background-color:$bg-color;
  }
  .text-one{
    background-color:$bg-color;
  }
  .text-rigt {
    float: left;
    padding-left: .8rem;
    width: 60%;
  }
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2rem;
    .start-recom {
      font-size: .7rem;
      font-weight: bold;
    }
    .money-dol{
      font-size: .6rem;
      color:$bg-color;
      font-weight: bold;
    }
    .book-money {
      font-size: .9rem;
      color:$bg-color;
      font-weight: bold;
    }
  }
  .wjx-green {
    color: $green-color;
  }
  .icon-gray {
    color: $gray-color;
  }
  .fr {
    float: right;
  }
  // .showDetail{
  //   display: none;
  // }
}
.hot-two {
    background-color:#fa651d;
}
.hot-three {
  background-color:#ffa800;
}
.gary {
  background-color:#909399;
}
.article-normal {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
}

</style>
